<template>
  <div>
    <header class="mui-bar mui-bar-nav">
      <a class=" mui-pull-left mui-icon mui-icon-left-nav" @click="goback"></a>
      <span class=" mui-pull-left" v-if='nameFlag === 1'>{{nameHeader}}</span>
      <span class=" mui-pull-left" v-if='nameFlag === 2'>{{nameHeader}}</span>
      <span class="mui-action-menu mui-icon mui-icon-more mui-pull-right" @click='toMore' v-if='actionFlag === 1'></span>
    </header>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  export default {
    props: ['name', 'action'],
    data() {
      return {
        nameHeader: this.name,
        // 1右边有更多的按钮  2 右边没有东西
        actionFlag: 1,
        nameFlag: 1
      }
    },
    created() {
      console.log(this.name, this.action, 'chatviewheader')
      this.init()
    },
    computed: {
      ...mapGetters(['getCurrentChatUsername'])
    },
     methods: {
       init() {
         if (this.action === 'more') {
           this.actionFlag = 1
         } else if (this.action === 'no') {
           this.actionFlag = 2
         } else if (this.action === 'groupmore') {
           this.actionFlag = 1
         }
       },
       goback() {
         this.$router.go(-1)
       },
       toMore() {
         if (this.action === 'more') {
          //  跳向聊天信息设置页面
           this.$router.push('/chatmessageview/' + this.getCurrentChatUsername.name)
         } else if (this.action.indexOf('groupmore') !== -1) {
           let id = this.action.split('/')[1]
           //  跳向群聊天信息设置页面
           this.$router.push('/groupmessageview/' + id)
         }
       }
     }
  }
</script>

<style lang='scss' scoped>
header{
  z-index: 12;
}
.mui-bar-nav{
  line-height: 44px;
  a{
    color: black;
  }
}
</style>
